<html>
    <head>
        <link type="text/css" href="css/home.css" rel="stylesheet" />
        <link type="text/css" href="css/menu.css" rel="stylesheet">
        <link type="text/css" href="css/search.css" rel="stylesheet">
        <link type="text/css" href="css/product.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery-1.4.1-and-plugins.min.js"></script>
        <!--<script type="text/javascript" src="js/home.js"></script>-->
        <script type="text/javascript" src="js/product.js"></script>
        <script type="text/javascript" src="js/jsor-jcarousel-7bb2e0a/lib/jquery.jcarousel.min.js"></script>
        <link rel="stylesheet" type ="text/css" href='js/jsor-jcarousel-7bb2e0a/skins/tango/skin.css' />
        <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel({
                // Configuration goes here
                wrap: 'circular'
            });
        });
        </script>
    </head>
    <body>
        <!-- Header starts -->
        <div id="header">
            <div id="logo">
                 <img src="images/logo.png" />
            </div>
            <!-- <form id="search_bar">
                <div class = "categories">
                    <p style="margin:0px;">All</p>
                </div>
                <input class="searchfield" type="text" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search...">
                <input class="searchbutton" type="button" value="Go">
            </form> -->
            <div class="search-area">
                <form class="form-wrapper cf" action="" method="post" accept-charset="utf-8" autocomplete="off">
                    <input type="text" placeholder="Search here..." required onkeyup="getStates(thisValue)" autofocus="autofocus" name="query" value="" spellcheck="false"/>
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <!-- Header ends -->

        <!-- Toolbar starts -->
        <div id='cssmenu'>
            <ul>
                <li class='active '><a href='index.html'><span>Home</span></a></li>
                <li class='has-sub '><a href='#'><span>Products</span></a>
                    <ul>
                       <li><a href='#'><span>Product 1</span></a></li>
                       <li><a href='#'><span>Product 2</span></a></li>
                    </ul>
                </li>
                <li><a href='#'><span>About</span></a></li>
                <li><a href='#'><span>Contact</span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li><a href='index.html'><span>CART</span></a></li>
                <li><a href='index.html'><span>LOG IN</span></a></li>
                <li><a href='index.html'><span>SIGN UP</span></a></li>
            </ul>
        </div>
        <!-- Toolbar ends -->

        <div id="main"> 
            <div class="product">
                <div id="product_desc">
                    <div id="product_img">
                        <div id="product_img_current">
                        </div>
                        <div id="product_img_list">
                            <ul>
                            </ul>
                        </div>
                    </div>
                    <div id="product_detail">
                        <div id="title">
                            <div id="name">
                            </div>
                            <div id="company">
                            </div>
                            <div id="rating">
                            </div>
                        </div>
                        <hr class ="divider" size ="1" noshade="noshade" >
                        <div id="price">
                        </div>
                        <div id="status">
                        </div>
                        <div id="seller">
                            <ul>
                                <li id="new"></li>
                                <li id="used"></li>
                                <li id="refurbished"></li>
                            </ul>
                        </div>
                        <div id="cart">
                            <table>
                                <tr>
                                    <td><span class="button">Add to Cart</span></td>
                                    <td><span class="button">Add to Wishlist</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <hr size ="1" noshade="noshade">
                <div id="product_detail_description">
                </div>
            </div>
            <div class="his">
                <div id="recent">
                    <h2>Recently Viewed Items</h2>
                    <div id="viewed">
                        <ul>
                            <li class="vieweditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/apple_ipad3_16_wifi.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Apple iPad 3 16G Wifi</p>
                                    <p> $599 </p>
                                </div>
                            </li>
                            <li class="vieweditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/canon_EOSRebelT3i.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Canon EOS Rebel T3i</p>
                                    <p> $2999</p>
                                </div>
                            </li>
                            <li class="vieweditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/sony_VAIOVPC-Z212.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Sony Vaio Z212</p>
                                    <p> $2999 </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="recommend">
                    <h2>Customers Who Bought Items in Your Recent History Also Bought</h2>
                    <div id="recmdlist">
                        <ul>
                            <li class="recmditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/apple_ipad3_16_wifi.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Apple iPad 3 16G Wifi</p>
                                    <p> $599 </p>
                                    <p> 5 stars </p>
                                </div>
                            </li>
                            <li class="recmditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/sony_VAIOVPC-Z212.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Sony Vaio Z212</p>
                                    <p> $2599 </p>
                                    <p> 4.5 stars </p>
                                </div>
                            </li>
                            <li class="recmditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/samsung_GalaxyTab_2_10G_wifi.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Samsung Galaxy Tab 2 10G Wifi</p>
                                    <p> $799 </p>
                                    <p> 4 stars </p>
                                </div>
                            </li>
                            <li class="recmditem">
                                <div class="image">
                                    <img class="bslimg" src='images/products/amazon_kindleFire_HD8_9.jpg' style="width:100%;height:100%;" />
                                </div>
                                <div class="info">
                                    <p>Amazon KindleFire HD8.9</p>
                                    <p> $499 </p>
                                    <p> 5 stars </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <ul id="outer">
                <li class="outerli">
                    Get to Know Us
                    <ul class="inner">                     
                        <li>Careers</li>
                        <li>Investor Relations</li>
                        <li>Press Releases</li>
                    </ul>
                </li>
                <li class="outerli">                     	
                    Make Money with Us
                    <ul>                     
                        <li>Sell on this site</li>
                        <li>Become an Affiliate</li>
                        <li>Advertise Your Products</li>
                        <li>Independently Publish with Us</li>
                    </ul>
                </li>
                <li class="outerli">
                    Let Us Help Your
                    <ul>
                        <li> Your Account </li>
                        <li> Shipping Rates & Policies </li>
                        <li> Returns Are Easy </li>
                        <li> Help</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="popup" id="image_enlarge" style="max-width: 600px; max-height: 600px;">
        </div>
    </body>
</html>